<template>
  <view class="search-input-container">
    <view class="search-input" @click="navigateToSearchInput">
      <v-icon
        size="30rpx"
        :custom-style="{ marginBottom: '4rpx' }"
        src="@/static/icons/sousuo.svg"
      />
      <view class="placeholder">
        <!-- 输入关键词搜索 -->
      </view>
      <!-- <v-button
        :custom-style="{
          height: '60rpx',
          width: '100rpx',
          minWidth: '0',
          padding: '0',
          fontSize: '22rpx',
        }"
        type="primary"
      >
        搜索
      </v-button> -->
      <!-- <v-icon
        size="26rpx"
        :custom-style="{ marginBottom: '4rpx' }"
        src="@/static/icons/saixuan.svg"
      /> -->
    </view>
  </view>
</template>

<script setup lang="ts">
const navigateToSearchInput = () => {
  uni.navigateTo({ url: '/pages/search/search-input-page' });
};
</script>

<style lang="scss" scoped>
.search-input-container {
  padding: 0 24rpx 12rpx;
  .search-input {
    height: 80rpx;
    box-sizing: border-box;
    border-radius: 40rpx;
    background-color: white;
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 0 30rpx 0 30rpx;
    .placeholder {
      flex: 1;
      min-width: 0;
      font-size: 24rpx;
      color: #999999;
      margin-top: 4rpx;
    }
  }
}
</style>
